import "./index.css"
import { DeleteOutlined,PlusCircleOutlined, EditOutlined, EyeOutlined  } from "@ant-design/icons"
import { Divider, Tree , Button, Cascader,Input,Table, Popconfirm} from "antd"
import type { ColumnsType } from 'antd/es/table';
import type { TableRowSelection } from 'antd/es/table/interface';
import Advertising from "@/components/Advertising"
import React, { useState ,Fragment} from 'react';
const { TreeNode } = Tree;
interface DataType {
    key: React.Key;
    name: string;
    age: number;
    address: string;
  }
  
  const columns: ColumnsType<DataType> = [
    {
      title: 'Name',
      dataIndex: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
    },
    {
        title: 'Age',
        dataIndex: 'age',
        defaultSortOrder: 'descend',
        sorter: (a, b) => a.age - b.age,
    },
    {
        title: '分类',
        dataIndex: 'age',
    },
    {
        title: '尺寸',
        dataIndex: 'age',
    },
      {
        title: '链接地址',
        dataIndex: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
    },
    {
        title: '操作',
        dataIndex: 'operation',
        render: (value: any, record: any, index: number) =>
          1>0? (
            <Fragment>
            <Button icon={<EyeOutlined />}>查看</Button>
            <Button icon={<EditOutlined />}>编辑</Button>
            <Popconfirm title="确定删除吗?">
            <Button  danger icon={<DeleteOutlined />}>删除</Button>
            </Popconfirm>
           </Fragment>
          ) : null,
      },
  ];
  
  const data: DataType[] = [];
  for (let i = 0; i < 46; i++) {
    data.push({
      key: i,
      name: `Edward King ${i}`,
      age: 32,
      address: `London, Park Lane no. ${i}`,
    });
  }
const PictureManagerment = () => {
    /* 每页显示 */
    interface Option {
        value: string;
        label: string;
        treeData?: Option[];
      }
      
      const options: Option[] = [
        {
          value: 'zhejiang',
          label: 'Zhejiang',
          treeData: [
            {
              value: 'hangzhou',
              label: 'Hangzhou',
              treeData: [
                {
                  value: 'xihu',
                  label: 'West Lake',
                },
              ],
            },
          ],
        },
        {
          value: 'jiangsu',
          label: 'Jiangsu',
          treeData: [
            {
              value: 'nanjing',
              label: 'Nanjing',
              treeData: [
                {
                  value: 'zhonghuamen',
                  label: 'Zhong Hua Men',
                },
              ],
            },
          ],
        },
      ];
      
      const dropdownRender = (menus: React.ReactNode) => (
        <div>
          {menus}
          <Divider style={{ margin: 0 }} />
          <div style={{ padding: 8 }}>The footer is not very short.</div>
        </div>
      );
      
    /* ---表格--- */
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection: TableRowSelection<DataType> = {
    selectedRowKeys,
    onChange: onSelectChange,
    selections: [
      Table.SELECTION_ALL,
      Table.SELECTION_INVERT,
      Table.SELECTION_NONE,
      {
        key: 'odd',
        text: 'Select Odd Row',
        onSelect: changableRowKeys => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((_, index) => {
            if (index % 2 !== 0) {
              return false;
            }
            return true;
          });
          setSelectedRowKeys(newSelectedRowKeys);
        },
      },
      {
        key: 'even',
        text: 'Select Even Row',
        onSelect: changableRowKeys => {
          let newSelectedRowKeys = [];
          newSelectedRowKeys = changableRowKeys.filter((_, index) => {
            if (index % 2 !== 0) {
              return true;
            }
            return false;
          });
          setSelectedRowKeys(newSelectedRowKeys);
        },
      },
    ],
  };
  /* --------------控制显示与隐藏-------------- */
  const [visible,setVisible]=useState(false)
  const handleAdd = () => {
    setVisible(true)
  }
  const handOk=()=>{
    setVisible(false)
  }
  const handleCancel=()=>{
    setVisible(false)
  }
    return (
        <fieldset>
            <Advertising visible={visible} onOk={handOk} onCancel={handleCancel}></Advertising>
            <div className="top">
            <Button type="primary" onClick={handleAdd} style={{marginRight:20}} icon={<PlusCircleOutlined />}>
                添加广告
            </Button>
            <Button type="primary" danger  icon={<DeleteOutlined />}>
                批量删除
            </Button>
            </div>

            <div className="bottom">
            <div className="tree">
                <Divider orientation="left">广告图分类</Divider>
                <Tree
                    showLine
                    checkable
                    defaultExpandedKeys={['0-0-0', '0-0-1']}
                    defaultSelectedKeys={['0-0-0', '0-0-1']}
                    defaultCheckedKeys={['0-0-0', '0-0-1']}
                >
                    <TreeNode title="全部" key="0-0">
                        <TreeNode title="首页轮播图大" key="0-0-0" >
                            <TreeNode title="leaf" key="0-0-0-0"  />
                            <TreeNode title="leaf" key="0-0-0-1" />
                        </TreeNode>
                        <TreeNode title="首页轮播图中" key="0-0-1">
                            <TreeNode title={<span style={{ color: '#1890ff' }}>sss</span>} key="0-0-1-0" />
                        </TreeNode>
                        <TreeNode title="首页轮播图小" key="0-0-2">
                            <TreeNode title="leaf" key="0-0-2-1" />
                        </TreeNode>
                    </TreeNode>
                </Tree>
            </div>

            <div className="fromlist">
                <div className="fromtop">
                    <div>每页显示： <Cascader style={{width:80}} options={options} dropdownRender={dropdownRender} placeholder="10条" /></div>
                    <Input style={{width:150}} placeholder="请输入关键字搜索" />
                </div>
                <div className="frombottom">
                    <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
                </div>
            </div>
            </div>
        </fieldset>
    )
}

export default PictureManagerment
